<template>
  <div class="ifr">
    <div class="tit">
      <span>鉴定结果</span>
    </div>
    <!--搜索框-->
    <div style="margin-left: .4rem;width: 25%;display: inline-block">
      <el-input placeholder="搜索物种名称" v-model="name" class="input-with-select">
        <el-button @click="idsearch" slot="append" icon="el-icon-search"></el-button>
      </el-input>

    </div>
    <div style="margin-left: .1rem;display: inline-block;width: 25%;">

      <el-date-picker v-model="times" @change="idsearch" type="daterange" range-separator="-" style="width: 100%"
        start-placeholder="开始回收日期" end-placeholder="结束回收日期" placeholder="请选择拍摄日期">
      </el-date-picker>

    </div>
    <div style="margin-left: .1rem;display: inline-block">
      <el-select v-model="cameraId" placeholder="卡编号" filterable clearable @change="idsearch">
        <el-option v-for="a in nationList" :key="a.id" :label="a.name" :value="a.id">{{ a.name }}
        </el-option>
      </el-select>
    </div>

    <div style="margin-left: .1rem;display: inline-block">
      <el-input v-model="userName" placeholder="请输入鉴定人姓名" clearable @change="idsearch"></el-input>
    </div>


    <!--搜索框-->
    <div class="idresult clearfix">
      <div v-for="item in list" @click="godettails(item)">
        <img v-if="isMp4(item.path) == '照片'" :src="iscloud(item.path)" alt="">
        <img v-if="isMp4(item.path) == '没图'" style="height: 100%" src="../../static/images/np.jpg" alt="">
        <video v-if="isMp4(item.path) == '视频'" :src="item.path"></video>
        <div>
          <span>{{ item.name }}</span>
          <span>{{ item.number }}张</span>
        </div>
      </div>
    </div>

    <!--分页B-->
    <div style="width: 100%;position:absolute;bottom:.3rem;left: 0;text-align: center">
      <el-pagination background layout="prev, pager, next" :current-page.sync="currentPage"
        @current-change="handleCurrentChange" :page-size="12" :total="totlnum">
      </el-pagination>
    </div>

    <!--分页E-->

  </div>
</template>
<script>
import api from '../utils/api'
import http from '../utils/http'

export default {
  data() {
    return {
      areaId: "",
      name: "",
      times: [],
      list: [],
      cameraId: "",
      nationList: [],
      userName: "",
      totlnum: 0,
      currentPage: 1
    }
  },
  created() {
    this.areaId = sessionStorage.getItem('areaId');
    this.getdata();
    this.getSelect()

  },
  methods: {
    handleCurrentChange(val) {
      this.getdata();
    },
    godettails(item) {
      this.$router.push({
        path: "/identificationResult/idfrdetalis",
        query: { name: item.name, userName: this.userName }
      })
    },
    getSelect() {
      let vm = this;
      (async function () {
        let res = await http.get(api.infrared.getCameraIdList, {
          areaId: vm.areaId,
        })
        res.data.data.forEach(t => {
          vm.nationList.push({ name: t.cameraCardId, id: t.id })
        })

      })()
    },
    idsearch() {
      this.getdata();
    },
    zo(a) {
      if (a < 10) {
        return "0" + a
      } else {
        return a
      }
    },
    getdata() {
      let vm = this, time = '';
      if (vm.times != '' && vm.times != null) {
        var myDate = new Date(vm.times[0]);
        let date1 = myDate.getFullYear() + '-' + this.zo(myDate.getMonth() + 1) + '-' + this.zo(myDate.getDate());
        var myDate1 = new Date(vm.times[1]);
        let date2 = myDate1.getFullYear() + '-' + this.zo(myDate1.getMonth() + 1) + '-' + this.zo(myDate1.getDate());
        time = date1 + "~" + date2;
      }
      ;
      (async function () {
        let res = await http.get(api.infrared.authenticateGroups, {
          areaId: vm.areaId,
          name: vm.name,
          cameraId: vm.cameraId,
          time: time,
          userName: vm.userName,
          pageNum: vm.currentPage,
          pageSize: 12
        })
        if (res.data.code == '200') {
          vm.list = res.data.data.content;
          vm.totlnum = res.data.data.totalElements;
        }
      })()
    },
    iscloud(p) {
      if (p.split(":")[0] == 'http') {
        return p + '@oosImage|100h'
      }
      if (p.split(":")[0] == 'https') {
        return p + '?x-amz-process=image/resize,h_100,m_lfit'
      }
      return '/iapi' + p
    },
    isMp4(m) {
      if (m == null || m == '') {
        return '没图'
      }
      let iv = m.split('.');
      if (iv[iv.length - 1].toLowerCase() == 'mp4') {
        return '视频'
      } else {
        return '照片'
      }
    },
  },
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false;
    next()
  },
}
</script>
<style scoped>
@import "../../static/css/identificationResult.css";
</style>
<style></style>
